<template>
  <div>
    <div class="customer-group-selector-warp">
    	<span>客户分组:</span>
    	<el-select style="width:300px" @change="getCustomerGroup" v-model="customerGroup" slot="prepend" placeholder="请选择">
	      <el-option label="全部" value="0"></el-option>
	      <el-option label="新开发客户" value="1"></el-option>
	      <el-option label="询盘客户" value="2"></el-option>
	      <el-option label="报价客户" value="3"></el-option>
	      <el-option label="谈判客户" value="4"></el-option>
	      <el-option label="样品客户" value="5"></el-option>
	      <el-option label="大货客户" value="6"></el-option>
	      <el-option label="未分组" value="-1"></el-option>
	    </el-select>
	    <span>请选择标签:</span>
	    <el-select style="width:400px" @change="getCustomerTag" v-model="customerTag" slot="prepend" placeholder="请选择">
	      <el-option label="可跟进客户" value="1"></el-option>
	      <el-option label="潜力老板" value="2"></el-option>
	      <el-option label="难-优势客户" value="3"></el-option>
	      <el-option label="难-蛋糕" value="3"></el-option>
	      <el-option label="难-圆筒" value="3"></el-option>
	      <el-option label="难-饭果盒" value="3"></el-option>
	      <el-option label="难-饭果盒巧克力托盘" value="3"></el-option>
	    </el-select>
    </div>

    <ul class="customer-selected-nav">
    	<li class="customer-selected-item">
    		<div class="customer-info-header" v-on:click="CustomerToggle(1)">
    			<span title="Mr. Marty Roberts" class="customer-name">Mr. Marty Roberts</span>
    			<span title="分组:询盘客户"class="customer-group">询盘客户</span>
				<el-rate disabled class="customer-rate" v-model="customerRate"></el-rate>
	    		<span title="客户状态:无" class="customer-state">无</span>
	    		<span title="国家地区:美国" class="customer-country"></span>
	    		<div class="customer-item-oper">
	    			<i title="编辑" class="icon-update"></i>
	    			<i title="删除" class="icon-delete"></i>
	    			<i title="跟进" class="icon-tag"></i>
	    		</div>
    		</div>
    		<div class="customer-info-footer">
    			<span class="customer-fllow">2018-09-18 跟进客户</span>
    			<span class="customer-update-date">上次跟进时间:10天前</span>
    		</div>
    		<div class="customer-option-L1" v-show="isActity">
    			<form>
	    			<textarea class="customer-fllow-content" rows="3" resize="none" cols="20">
	    				
					</textarea>
					<div class="sub-option">
	    				<span>跟进日期：</span>
	    				<el-date-picker size="mini" class="customer-fllow-time-picker" type="date" placeholder="选择日期">
	    					
	    				</el-date-picker>
	    			</div>
					<div class="sub-option"><span>联系人:Jasnic</span></div>
					<div class="sub-option">
						<span>跟进类型：</span>
						<el-select  size="mini" @change="getCustomerTag" slot="prepend" placeholder="请选择">
					      <el-option label="快速记录" value="1"></el-option>
					      <el-option label="电话" value="2"></el-option>
					      <el-option label="会面" value="3"></el-option>
					      <el-option label="社交平台" value="4"></el-option>
					    </el-select>
					</div>
					<el-button style="float: right" size="mini" type="primary">提交</el-button>
				</form>
    		</div>
    	</li>

    	<li class="customer-selected-item">
    		<div class="customer-info-header">
    			<span title="Mr. Marty Roberts" class="customer-name">Mr. Marty Roberts</span>
    			<span title="分组:询盘客户"class="customer-group">询盘客户</span>
				<el-rate disabled class="customer-rate" v-model="customerRate"></el-rate>
	    		<span title="客户状态:无" class="customer-state">无</span>
	    		<span title="国家地区:美国" class="customer-country"></span>
	    		<div class="customer-item-oper">
	    			<i title="编辑" class="icon-update"></i>
	    			<i title="删除" class="icon-delete"></i>
	    			<i title="跟进" class="icon-tag"></i>
	    		</div>
    		</div>
    		<div class="customer-info-footer">
    			<span class="customer-fllow">2018-09-18 跟进客户</span>
    			<span class="customer-update-date">上次登录时间:2018-09-18</span>
    		</div>
    	</li>
    </ul>
    <div class="g-oper">
		 <i  title="筛选客户" class="icon-sift my-pink"></i>
		 <i  title="排序" class="icon-order my-bule"></i>
		 <i  title="添加客户" class="icon-i-add my-red"></i>
	 </div>
  </div>

  

</template>

<script>
export default {
  name: 'CustomerList',
  data () {
    return {
    	customerGroup:"",
    	customerTag:"",
    	customerRate:3,
    	isActity:false
    }
  },
  methods:{
  	getCustomerGroup:function(value){

  	},
  	getCustomerTag:function(value){

  	},
  	CustomerToggle:function(id){
  		this.isActity = !this.isActity;
  	}
  }
 
}
</script>

<style scoped>
.customer-group-selector-warp{
	background-color: white;
	padding: 10px;
	border-radius: 4px;
	text-align: center;
	box-shadow: 1px 2px 5px 1px #565656;
	margin-bottom: 20px;
}
.customer-group-selector-warp *{
	margin: 0 5px;
	font-size: 13px;
}
.customer-selected-nav{
	padding: 20px;
	position: relative;
	background-color: white;
	border-radius: 5px;
    box-shadow: 1px 2px 5px 1px #565656;
}
.customer-selected-item{
	padding: 20px;
	position: relative;
	min-height: 40px;
    border-bottom: 1px #ccc solid;
}
.customer-name{
	position: absolute;
    left: 10px;
}
.customer-group{
	position: absolute;
    left: 250px;
}
.customer-rate{
	position: absolute;
    left: 450px;
}
.customer-state{
	background-color: #ccc;
	position: absolute;
	left:700px;
	padding: 3px;
}
.customer-info-header{
	width: 100%;
    height: 60px;
}
.customer-country{
	position: absolute;
    left: 800px;
}
.customer-item-oper{
	position: absolute;
    left: 950px;
}
.customer-item-oper i{
	margin-left: 10px;
}
.customer-info-footer{
	position: absolute;
    top: 55px;
    font-size: 12px;
    color:#8c8b8b;
}
.customer-update-date{
	margin-left:310px;
}
.customer-option-L1{
	position: relative;
	width: 100%;
	border: 1px solid #ccc;
    padding: 10px 5px;
    border-radius: 5px;
    font-size: 10px;
    color: #565656;
}
.customer-option-L1 .sub-option{
	display: inline;
	margin-right:60px;
}
.customer-fllow-content{
	border:none;
	resize:none;
	width: 100%;
}
</style>
